{% extends "WebConsole/base.html" %}
  
  {% block content %}</p>

<div class="container-win row placeholders">
  <div id="server-title"><h4>{{ request.GET.title }}</h4></div>
  <form class="form-inline" onkeypress="if(event.keyCode==13||event.which==13){return false;}">
    <div class="form-group" style="margin-right: 1em">
      <input class="form-control" type="text" name="second" id="second" placeholder="输入查询时长(单位：秒)" style="padding-left: 0.3em;padding-top: 0.2em;padding-bottom: 0.3em;" />
      <div>注：默认查询时长为10秒</div>
    </div>
    <div class="form-group" style="margin-right: 1em">
        <input class="form-control" type="text" name="password" id="password" placeholder="输入密码" style="padding-left: 0.3em;padding-top: 0.2em;padding-bottom: 0.3em; " />
        <div>注：需要提供telnet密码，默认为pwd123456</div>
    </div>
    <div class="form-group">
        <input class="btn btn-default form-control" type="button" name="exec" value="连接组件" id="exec" onClick="onProfile(this)" />
        <div id="output_block_area2" class="form-control" style="border: none;background-color: none;box-shadow:none;"></div>
        <div style="height: 1.5em"></div>
    </div>   
    </div>
  </form>
  
  <div id="tottime" class="hide" style="width: 100%;height: 280px;"></div>
  <div class="object-info hide" style="height: 80px"></div>
  <table id="object-data" class="tablesaw data-table table table-striped table-condensed" data-tablesaw-sortable data-tablesaw-sortable-switch >
    <thead>
      <tr>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">ncalls</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1">tottime</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">percall</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">cumtime</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">percall</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">filename:lineno(function)</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <table id="network-data" class="hide tablesaw data-table table table-striped table-condensed" data-tablesaw-sortable data-tablesaw-sortable-switch >
    <thead>
      <tr>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">name</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1">sent#</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">size</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">avg</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">total#</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">totalsize</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="6">recv#</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="7">size</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="8">avg</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="9">total#</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="10">totalsize</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <table id="event-data" class="hide tablesaw data-table table table-striped table-condensed" data-tablesaw-sortable data-tablesaw-sortable-switch >
    <thead>
      <tr>
        <th>name</th>
        <th>count</th>
        <th>size</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <br>
  <div id="execute-block">
    <input name="component_ip" type="hidden" id="component_ip" value="{{ request.GET.ip }}">
    <input name="component_port" type="hidden" id="component_port" value="{{ request.GET.port }}">
    <input name="ws_url" type="hidden" id="ws_url" value="{{ ws_url }}">
  </div>

</div>
 {% endblock %}

{% block tail_js %}
<script src="/static/js/pytools.js"></script>
<script src="/static/js/kbengine.js"></script>
<script src="/static/js/tablesaw.js"></script>
<script src="/static/js/tablesaw-init.js"></script>

<script>$(".profile-comps").addClass("active");</script>
<script>
  $(".kbe-list .dd").hide();
  $(".kbe-list .statistics .dd").show();
  $(".kbe-list .statistics").css({"background-color":"#317eb4"});
  $(".kbe-list .statistics").find('li').addClass("menu_chioce");

var cmd = getUrlParam("cmd");

function onProfile(elm)
{
    var elmm = $(elm);
    if (!$.data.profile_started)
    {
        ws_url = "";
        var sec = $("#second").val();
        var password = $("#password").val();
        if(sec == null || sec == "" || sec == 0){
          sec = "10";
        }

        if(password == null || password == "") {
          password = "pwd123456";
        }

        if (sec > 0 )
        {
          // sec = $("#second").val();
          
          ws_url = "{{ws_url}}"+"&sec="+sec+"&password="+password;
          $("#ws_url").val(ws_url);
          elmm.val("断开连接");
          $.data.profile_started = true;
          KBEngine.resetPyTickProfileData();
          connect_to();
          if (cmd != "pytickprofile")
            show_data(sec);
          else
            show_echars();
        }
        else
          alert("查询时间需大于等于0");
    }
    else
    {
        elmm.val("连接组件");
        $.data.profile_started = false;
        window.kbe_socket.close(); 
    }
}

function connect_to()
{
    var socket = new WebSocket($("#ws_url").val());
    socket.onopen = function(evt) { 
        $('#output_block_area2').html("<p> 连接成功！欢迎使用WebConsole。</p>");
        if (cmd == 'pytickprofile')
          show_echars();
    }; 
    socket.onclose = function(evt) { 
        $('#output_block_area2').html("<p> 连接已关闭，请重新连接！！！ </p>");
        $.data.connect_closed = true;
    }; 
    socket.onmessage = function(evt) { 
        //$('#output_block_area2').append('<span>' + evt.data + '</span> <br>');
        show_result( evt.data );
    }; 
    socket.onerror = function(evt) { 
        //alert("websocket onerror: " + evt);
        $('#output_block_area2').html("<p> 连接失败！！！请刷新重试。 </p>");
    }; 
    window.kbe_socket = socket;
    $.data.connect_closed = false;
}

function show_result(data)
{ 
    KBEngine.parsePyTickProfileData(data,cmd);

    //$('#output_block_area').append( data );
    //$('#output_block_area').append( "<p>" + $.data.pyTickProfileDatas.length + "</p>" );
    // $('#output_block_area').append( $.data.pyTickProfileDatas.length+ " - " );
}
window.onload = function()
{
  if (cmd =="pytickprofile")
  {
    $("#tottime").removeClass("hide");
    $(".object-info").removeClass("hide");
  }

  if (cmd =="eventprofile")
  {
    $("#event-data").removeClass("hide");
    $("#object-data").addClass("hide");
  }
  if (cmd =="networkprofile")
  {
    $("#object-data").addClass("hide");
    $("#network-data").removeClass("hide");
  }
}

function show_data(sec)
{
  var pytick_data = "";
  var layer_time = sec*1000+1000;
  layer.msg(
    '运行中……', 
  {
    icon: 16, 
    time: layer_time,
    shade: [0.3,'#000']
  });
  setTimeout(data2tbody,layer_time);

  function data2tbody()
  {
      
      for (var arr = 0; arr < $.data.pyTickProfileDatas.length; arr++) 
      {
        if (arr>0)
          if ($.data.pyTickProfileDatas[arr] == $.data.pyTickProfileDatas[arr-1])
            continue;
        if (cmd=="eventprofile")
        {
          if (arr>0)
            pytick_data += '<tr><td>　</td><td></td><td></td></tr><tr><td style="color:red">'+$.data.pyTickProfileDatas[arr].title+'</td><td></td><td></td></tr>';
          else
            pytick_data += '<tr><td style="color:red">'+$.data.pyTickProfileDatas[arr].title+'</td><td></td><td></td></tr>';
        }
        for (var i = 0; i < $.data.pyTickProfileDatas[arr].lines.length; i++) 
        {
          pytick_data += '<tr>';
          for (var j = 0; j < $.data.pyTickProfileDatas[arr].lines[i].length; j++)
            pytick_data +='<td>'+$.data.pyTickProfileDatas[arr].lines[i][j]+'</td>';
          pytick_data += '</tr>';
        }
      }
      if (cmd == "networkprofile")
        $('#network-data tbody').html(pytick_data);
      else if(cmd == "eventprofile")
        $('#event-data tbody').html(pytick_data);
      else
        $('#object-data tbody').html(pytick_data);
  }
}

function show_echars(){
  arr_x = new Array();
  arr_y = new Array();
  var start_num = 0;
  var end_num = 100;
  var myChart = echarts.init(document.getElementById('tottime'));
  var option = {
    title : {
        text: '组件Object响应时间',
        x: 'center',
        align: 'right'
    },
    grid: {
        bottom: 80
    },
    tooltip : {
        trigger: 'axis',
        triggerOn:'click',
        width:0,
        formatter: function(params,ticket,callback) {
          show_object_data(params[0].name);
          return params[0].name+" : "+$.data.pyTickProfileDatas[params[0].name].tottime;
         }  
    },
    legend: {
        data:['响应时间'],
        x: 'left',
        top:'5%',
    },
    dataZoom: [
        {
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          zoomLock:true,
          realtime:true
        }
    ],
    xAxis : [
        {
            type : 'category',
            boundaryGap: true,
            axisLine: {onZero: false},
            data : arr_x,
        }
    ],
    yAxis: [
        {
            name: '响应时间',
            type: 'value',
        }
    ],
    series: [
        {
            name:'响应时间',
            type:'bar',
            hoverAnimation: false,
            areaStyle: {
                normal: {}
            },
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            data:arr_y,
        }
    ]
};

  myChart.setOption(option);

  //实时获取dataZoom的状态
  myChart.on("dataZoom",function(params){
      start_num = params.start;
      end_num = params.end;
    })

  //实时更新时间轴
  timeTicket = setInterval(function () {
    data_length = $.data.pyTickProfileDatas.length-1;

    if (arr_x.length > 200)
      start_num = end_num - (200/arr_x.length)*100;

    for (var ii = 0; ii < data_length; ii++) {
      arr_x[ii] = ii;
      arr_y[ii] = $.data.pyTickProfileDatas[ii].tottime;
      if ($.data.profile_started == false){
        clearInterval(timeTicket);
        break;
      }
    }

    //实时更新重写数据
    myChart.setOption({
        dataZoom : [{
         start:start_num,
         end:end_num,
        }],
        xAxis : [{
          data : arr_x
        }],
        series: [{
          data: arr_y
        }]
      });
    }, 1000);
}

function show_object_data(Array_num){

  var res = "";
  var info = $.data.pyTickProfileDatas[Array_num].title+'<br />'+'tottime : '+$.data.pyTickProfileDatas[Array_num].tottime+'<br />'+'totcall : '+$.data.pyTickProfileDatas[Array_num].totcall+'<hr>'

  $('.object-info').html(info);
  for (var i = 0; i < $.data.pyTickProfileDatas[Array_num].lines.length; i++) {
    res += '<tr>';
    for (var j = 0; j < 6; j++) {
      res +='<td>'+$.data.pyTickProfileDatas[Array_num].lines[i][j]+'</td>';
    }
    res += '</tr>';
  }

  $('#object-data tbody').html(res);

}

function getUrlParam(name) 
{ 
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的 正则表达式 对象 
    var r = window.location.search. substr (1).match(reg);  //匹配目标参数 
    if (r!=null) return unescape(r[2]); return null; //返回参数值 
}

</script>

   
{% endblock %}
